<template>
    <div>
        <header class="header">
            <div class="wrapper">
                <span>NWUER BBS</span>
                <nav>
                    <router-link class="link" to='/index'>首页</router-link>
                    <router-link class="link" to='/search'>搜索</router-link>
                    <router-link class="link" to='/about'>关于</router-link>
                </nav>
                <!-- <el-avatar class="avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> -->
                <div class="avater-container">
                    <el-dropdown>
                        <el-avatar class="el-dropdown-link" shape="circle" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><router-link to="/home">我的主页</router-link></el-dropdown-item>
                            <el-dropdown-item :disabled="isLogin">
                                <router-link to="/login" v-if="!isLogin">登录</router-link>
                                <router-link to="/login" v-else>您已登录</router-link>
                            </el-dropdown-item>
                            <el-dropdown-item :disabled="!isLogin" @click.native="handleLogout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </header>
    </div>
</template>

<script>
export default {
    name:"MyHeader",
    methods:{
        handleCommand:function(command){
            console.log(command);
        },
        handleLogout:async function(){
            const params = {
                'token':window.sessionStorage.getItem('token')
            }
            console.log(params);
            let url = getUrl('logout');
            try{
                const {data:res} = await axios.post(url,{params:params});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    let token = window.sessionStorage.getItem("token");
                    this.$router.push('login');
                    //console.log(token);
                    this.$store.commit("toLogout",token);
                    this.$message.success(res.meta.msg);
                }
            }catch(e){
                this.$message.error("请求出错");
            }
        }
    },
    computed:{
        isLogin:function(){
            if(this.$store.state.isLogin === '未登录'){
                return false;
            }else{
                return true;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.header{
    width:100%;
    height: 80px;
    background-color: #fff;
    position: sticky;
    top: 0px;
    .wrapper{
        width:80%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span{
            flex:0 1 15%;
        }
        nav{
            flex: 0 1 70%;
            .link{
                display: inline-block;
                width:50px;
            }
        }
        .avater-container{
            width:50px;
            flex: 0 1 15%;
        }
    }
}

</style>